<template>
  <div class="fixed-random-container">
    <div class="fixed-container" :style="{ left: displayContent === 'fixed' ? '0px' : '-100%' }">
      <Input
        v-model:value="interval.fixed"
        size="small"
        type="number"
        style="width: calc(100% - 25px)"
        @change="emit('update:value', interval)"
      />
      <div class="fixed-icon" @click="changeDisplayContent('random')">fx</div>
    </div>

    <div class="random-container" :style="{ left: displayContent === 'random' ? '0px' : '100%' }">
      <div class="random-icon" @click="changeDisplayContent('fixed')">fv</div>
      <Select
        v-model:value="interval.random"
        size="small"
        style="width: calc(100% - 25px)"
        @change="emit('update:value', interval)"
      >
        <SelectOption v-for="item in randomFunList" :key="item.id" :value="item.id">
          {{ item.name }}
        </SelectOption>
      </Select>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Input, Select, SelectOption } from 'ant-design-vue'
import { onMounted, ref, watch } from 'vue'

const props = defineProps({
  interval: {
    type: Object,
    required: true
  }
})
const emit = defineEmits(['update:value'])
const interval = ref(props.interval)
//当前显示的内容
const displayContent = ref<'fixed' | 'random'>(props.interval.type)
//修改显示内容
const changeDisplayContent = (content: 'fixed' | 'random') => {
  displayContent.value = content
  interval.value.type = content
  emit('update:value', interval.value)
}

watch(
  () => props.interval,
  (newValue) => {
    interval.value = newValue
  }
)

type IRandomFun = {
  id: string
  name: string
  funtionCode: string
  action: () => number
}
// 随机函数列表
const randomFunList = ref<IRandomFun[]>([])
onMounted(async () => {
  randomFunList.value = await window.electron.ipcRenderer.invoke(
    'randomFun',
    'getRandomFunList',
    []
  )
})
</script>

<style scoped lang="scss">
.fixed-random-container {
  width: 100%;
  position: relative;
  overflow: hidden;
  height: 30px;

  .fixed-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 5px;
    width: 100%;
    transition: left 0.5s ease-in-out;

    .fixed-icon {
      width: 23px;
      border: 1px solid #d9d9d9;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .random-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 5px;
    width: 100%;
    transition: left 0.5s ease-in-out;

    .random-icon {
      width: 23px;
      border: 1px solid #d9d9d9;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
